import React from 'react';
import styles from './index.less';
import { Input, Form } from 'antd';

const { TextArea } = Input;

interface SubmitFC {
  (): void;
}

interface ReplyProps {
  onSubmit: SubmitFC;
}

const Standard: React.FC<ReplyProps> = (props) => {
  const { onSubmit } = props;
  const [submitForm] = Form.useForm();

  const handleSubmitForm = () => {
    console.log('fuck you mon');
    console.log(submitForm.getFieldValue());

    onSubmit(submitForm.getFieldValue());
  };

  return (
    <div className={styles.reply}>
      <div className={styles['reply-title']}>我的回复</div>
      <Form form={submitForm}>
        <Form.Item name="suggest">
          <TextArea
            className={styles['input-box']}
            placeholder="给出明确回复，人群的范围，如年龄、职业分类等，根据实际情况选择合适分类，如不能明确分类，需给出解释。"
          />
        </Form.Item>
        <Form.Item name="analyse">
          <TextArea
            className={styles['input-box']}
            placeholder="对人群分析详细，可根据相关分类进行阐述，并对每一类人群进行具体解释。可包括原因、后果、症状等，需根据具体情况分析。"
          />
        </Form.Item>
        <Form.Item name="extra">
          <TextArea
            className={styles['input-box']}
            placeholder="延展内容：具体可根据情况而定，若query中的核心元素为疾病、症状等，可加以疗方法、预防措施的补充。若核心元素为其他类别，比如疫苗，可根据相关特性进行阐述，如何选择、接种禁忌等等。"
          />
        </Form.Item>

        <Form.Item>
          <div className={styles['btn-box']}>
            <p className={styles['total-text']}>
              以上三项需累计输入<span>100</span>字以上
            </p>
            <span className={styles['btn-submit']} onClick={handleSubmitForm}>
              提交
            </span>
          </div>
        </Form.Item>
      </Form>
    </div>
  );
};

export default Standard;
